<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
  <title>考拉WebApp</title>
  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/tabbar.css">
  <link rel="stylesheet" href="./css/home.css">
  <link rel="stylesheet" href="./css/home_download.css">
  <link rel="stylesheet" href="./css/home_subsidy.css">
  <link rel="stylesheet" href="./css/home_category.css">
  <link rel="stylesheet" href="./css/home_product.css">
</head>
<body>
  
  <!-- tabbar -->
  <div class="tabbar">
    <div class="item">
      <img src="./img/tabbar_home_active.png" alt="">
    </div>
    <div class="item">
      <img src="./img/tabbar_category.png" alt="">
    </div>
    <div class="item">
      <img src="./img/tabbar_cart.png" alt="">
    </div>
    <div class="item">
      <img src="./img/tabbar_profile.png" alt="">
    </div>
  </div>

  <!-- home -->
  <div class="home">
    <!-- 下载App -->
    <div class="download">
      <div class="left">
        <img class="logo" src="./img/logo.png" alt="">
        <div class="info">
          <div class="title">
            【考拉海购】官方自营 正品保障
          </div>
          <div class="desc">
            下载APP新人可享125元购物礼包
          </div>
        </div>
      </div>
      <a class="right" href="#">
        打开APP
      </a>
    </div>

    <!-- 搜索 -->
    <!-- 列表 -->

    <!-- 补贴 -->
    <div class="subsidy">
      <div class="header">
        <div class="left">
          <img src="./img/strong_subsidy.png" alt="">
          <div class="time">
            <span class="item hour">07</span>
            <span class="split">:</span>
            <span class="item minute">51</span>
            <span class="split">:</span>
            <span class="item hour">55</span>
          </div>
        </div>
        <div class="right">
          大牌底价补贴
        </div>
      </div>
      <div class="list">
        <div class="item">
          <img src="./img/subsidy_01.jpg" alt="">
          <div class="info">
            <div class="new">硬核价¥362</div>
            <div class="old">¥999</div>
          </div>
        </div>
        <div class="item">
          <img src="./img/subsidy_01.jpg" alt="">
          <div class="info">
            <div class="new">硬核价¥362</div>
            <div class="old">¥999</div>
          </div>
        </div>
        <div class="item">
          <img src="./img/subsidy_01.jpg" alt="">
          <div class="info">
            <div class="new">硬核价¥362</div>
            <div class="old">¥999</div>
          </div>
        </div>
        <div class="item">
          <img src="./img/subsidy_01.jpg" alt="">
          <div class="info">
            <div class="new">
              硬核价
              <span class="unit">¥</span>
              <span class="money">362</span>
            </div>
            <div class="old">¥999</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 分类 -->
    <div class="category">
      <div class="item active">
        <div class="title">精选</div>
        <div class="subtitle">猜你喜欢</div>
      </div>
      <div class="item">
        <div class="title">特惠</div>
        <div class="subtitle">多买多省</div>
      </div>
      <div class="item">
        <div class="title">精选</div>
        <div class="subtitle">猜你喜欢</div>
      </div>
      <div class="item">
        <div class="title">精选</div>
        <div class="subtitle">猜你喜欢</div>
      </div>
      <div class="item">
        <div class="title">精选</div>
        <div class="subtitle">猜你喜欢</div>
      </div>
    </div>

    <!-- 商品 -->
    <div class="product">
      <div class="item">
        <div class="album">
          <img src="./img/product_01.jpg" alt="">
        </div>
        <div class="info">
          <div class="company">
            索尼
          </div>
          <div class="desc">Sony索尼 PlayStation5主机PS5游戏机 日版</div>
          <div class="tags">
            <span class="tag ticket">下单立减300元</span>
            <span class="tag">包税</span>
          </div>
          <div class="price">优惠价¥4599</div>
        </div>
      </div>
      <div class="item">
        <div class="album">
          <img src="./img/product_01.jpg" alt="">
        </div>
        <div class="info">
          <div class="company">
            索尼
          </div>
          <div class="desc">Sony索尼 PlayStation5主机PS5游戏机 日版</div>
          <div class="tags">
            <span class="tag ticket">立减200元</span>
            <span class="tag">2件7.1折</span>
          </div>
          <div class="price">优惠价¥4599</div>
        </div>
      </div>
      <div class="item">
        <div class="album">
          <img src="./img/product_01.jpg" alt="">
        </div>
        <div class="info">
          <div class="company">
            索尼
          </div>
          <div class="desc">Sony索尼 PlayStation5主机PS5游戏机 日版</div>
          <div class="tags">
            <span class="tag ticket">立减200元</span>
            <span class="tag">2件7.1折</span>
          </div>
          <div class="price">优惠价¥4599</div>
        </div>
      </div>
      <div class="item">
        <div class="album">
          <img src="./img/product_01.jpg" alt="">
        </div>
        <div class="info">
          <div class="company">
            索尼
          </div>
          <div class="desc">Sony索尼 PlayStation5主机PS5游戏机 日版</div>
          <div class="tags">
            <span class="tag ticket">立减200元</span>
            <span class="tag">2件7.1折</span>
          </div>
          <div class="price">优惠价¥4599</div>
        </div>
      </div>
    </div>

  </div>

  <!-- <div class="category"></div>
  <div class="cart"></div>
  <div class="profile"></div> -->

</body>
</html>